<template>
	<view>
		<u-navbar v-if="!$isWeixin()" :customBack="backToHome" :title="title" :titleBold="true" :title-width="450" :is-fixed="true">
			<template slot="right">
				<view class="u-p-r-40 u-flex"><u-image @click="showSearchPopup = true" src="@/static/images/search-active.png" :width="40" :height="40"></u-image></view>
			</template>
		</u-navbar>

		<view class="u-flex-col u-col-bottom u-p-t-20" v-if="$isWeixin()">
			<view class="u-p-r-40 u-flex"><u-image @click="showSearchPopup = true" src="@/static/images/search-active.png" :width="40" :height="40"></u-image></view>
		</view>

		<view class="review-list" :class="{ 'scroll-lock': showSearchPopup }">
			<view class="review-item" v-for="(item, index) in reviewList" :key="index">
				<view class="title u-flex">
					<text class="dealer-name">一级经销商:</text>
					<text class="">{{ item.FirstDealerName }}</text>
				</view>
				<view class="title u-flex">
					<text class="dealer-name">二级经销商:</text>
					<text class="">{{ item.DoubleDealerName }}</text>
				</view>
				<view class="grid-list">
					<view class="title u-flex" style="grid-column-start: 2 span;">
						<text class="dealer-name">门店:</text>
						<text class="">{{ item.StoreName }}</text>
					</view>
					<text>是否精选门店: {{ item.IsExclusiveName }}</text>
					<text>总监：{{ item.DirectorName }}</text>
					<text>销售经理：{{ item.SalseManagerName }}</text>
					<text>城市经理：{{ item.DealerTerminalName }}</text>
					<text>团队负责人：{{ item.TeamLeaderName }}</text>
					<text>批复金额: {{ item.StoreRenovationMoney == -1 ? '' : item.StoreRenovationMoney }}</text>
					<text>支付类型: {{ item.PayTypeName }}</text>
					<view>
						状态：
						<text style="font-weight: bold;" :style="{ color: item.FontColor }">{{ item.StateName }}</text>
					</view>
					<view>
						协议状态：
						<text style="font-weight: bold;" v-html="item.AgreementAcceptanceStateName"></text>
					</view>
					<text>申请人：{{ item.ApplyForManagerName }}</text>
					<text class="u-font-22">申请时间：{{ (item.Created * 1000) | date('yyyy-mm-dd') }}</text>
				</view>
				<view class="btn-group">
					<u-button v-if="showDownload(item)" size="mini" type="warning" class="u-m-l-10" @click="download(item)">下载协议</u-button>
					<u-button v-if="item.Url" size="mini" type="warning" class="u-m-l-10" @click="downloadUrl(item)">盖章协议下载</u-button>
					<u-button v-if="showAgreementBtn(item)" size="mini" type="warning" class="u-m-l-10" @click="toAgreementPage(item)">盖章协议回传</u-button>
					<u-button size="mini" class="u-m-l-10" @click="toDetailPage(item)">查看</u-button>

					<u-button v-if="item.IsAuditEnd != 1 && item.IsShowAuditBtn > 0" class="u-m-l-10" type="warning" size="mini" @click="toReviewPage(item)">审核</u-button>
				</view>
			</view>

			<u-loadmore :status="status" />
		</view>

		<u-popup :border-radius="24" width="600" v-model="showSearchPopup" mode="right">
			<view class="u-p-30">
				<search-form
					v-model="searchParams"
					@change="onSearchChange"
					:metadata="metadata"
					:showLevel="false"
					:showApplyType="false"
					:isStoreCostsList="true"
					@close="showSearchPopup = false"
				></search-form>
			</view>
		</u-popup>

		<u-modal
			title="申请"
			:showLoading="false"
			:mask-close-able="true"
			v-model="showApplyModal"
			cancel-text="重置"
			:show-cancel-button="true"
			@confirm="toApplyPage"
			:async-close="true"
			confirm-text="确定"
		>
			<apply-search ref="applySearch"></apply-search>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '专卖店费用审核列表',
			SelectType: 1,
			showSearchPopup: false,
			IsFirst: true,
			reviewPage: {
				Items: [],
				PageCount: 0,
				PageIndex: 0,
				PageSize: 10,
				TotalCount: 0
			},
			reviewList: [],
			status: 'loadmore',
			showApplyModal: false,
			
			ApplyType: '',

			metadata: {
				DealerDivisionList: [],
				DealerTerminalList: [],
				DirectorList: [],
				RegionalDirectorList: [],
				SalesServiceList: [],
				SalseList: [],
				SeniorDealerTerminalList: [],
				TeamList: [],
				AuditStateBaseList: []
			},
			searchParams: {
				DirectorId: null,
				SalseId: null,
				DealerTerminalId: null,
				TeamId: null,
				SeniorDealerTerminalId: null,
				DealerDivisionId: null,
				SalesService: null,
				RegionalDirector: null,

				DealerName: '',
				StartTime: null,
				EndTime: null,
				Level: null,
				ApplayType: null,
				IsExclusive: 0,
				IsDesignUp: 0,
				AuditState: null
			}
		};
	},

	onLoad(options) {
		if (options.ApplyType) {
			this.searchParams.ApplyType = options.ApplyType;
			this.ApplyType = options.ApplyType

			if (options.ApplyType == 1) {
				this.title = '动力金审核';
			}
			if (options.ApplyType == 2) {
				this.title = '渠道补贴审核';
			}
		}


		if (this.$isWeixin()) {
			this.$setTitle(this.title);
		}
	},
	
	onShow() {
		this.getData(true);
	},

	// 触底事件
	onReachBottom() {
		if (this.reviewPage.PageIndex + 1 >= this.reviewPage.PageCount) return;
		this.status = 'loading';
		this.reviewPage.PageIndex = this.reviewPage.PageIndex + 1;
		this.getData();
	},

	methods: {
		backToHome() {
			uni.navigateBack()
		},
		
		toReviewPage(item) {
			this.$u.route({
				url: '/pages/review/storeCosts/review',
				params: {
					DealerId: item.DealerId,
					Id: item.StoreRenovationId,
					ApplyType: this.ApplyType
				}
			})
		},

		showDownload(item) {
			if ((item.State == 6 || (item.State == 99 && item.IsAuditEnd == 1)) && item.EnclosureFile != null && item.EnclosureFile != '') {
				return true;
			}

			return false;
		},

		showAgreementBtn(item) {
			if (item.State == 6 || (item.State == 99 && item.IsAuditEnd == 1)) {
				return true;
			}
			return false;
		},

		download(item) {
			// this.$openFile(this.$getRemotePdfUrl(item.EnclosureFile))
			window.location.href = this.$getRemotePdfUrl(item.EnclosureFile);
		},

		downloadUrl(item) {
			window.location.href = this.$getRemoteUrl(item.Url);
		},

		btnClick() {
			this.showApplyModal = true;
		},

		onSearchChange(e) {
			this.showSearchPopup = false;
			this.reviewPage.PageIndex = 0;
			this.$nextTick(() => {
				this.getData(true);
			});
		},

		toAgreementPage(item) {
			this.$u.route({
				url: '/pages/apply/storeCosts/agreement',
				params: {
					StoreRenovationId: item.StoreRenovationId,
					DealerId: item.DealerId
				}
			});
		},

		toApplyPage(item) {
			const applySearch = this.$refs.applySearch;

			const dealerId = applySearch.params.StoreDealerId;

			if (!dealerId) {
				this.$u.toast('请选择门店');
				return false;
			}

			this.$u.route({
				url: '/pages/apply/storeCosts/index',
				params: {
					DealerId: dealerId
				}
			});

			this.showApplyModal = false;
		},

		toDetailPage(item) {
			this.$u.route({
				url: '/pages/review/storeCosts/detail',
				params: {
					StoreRenovationId: item.StoreRenovationId
				}
			});
		},

		getData(reload) {
			this.searchParams.DoorName = this.searchParams.DealerName;
			this.$u.api
				.getStoreRenovationReviewList({
					...this.searchParams,
					...{
						IsFirst: this.IsFirst,
						Level: this.Level,
						SelectType: this.SelectType,
						Pageindex: this.reviewPage.PageIndex,
						Pagesize: this.reviewPage.PageSize
					}
				})
				.then(res => {
					console.log(res);
					const { ResultCode, ResultMessage, ResultData } = res;
					if (ResultCode === 1) {
						if (this.IsFirst) {
							this.metadata.DealerDivisionList = ResultData.DealerDivisionList;
							this.metadata.DealerTerminalList = ResultData.DealerTerminalList;
							this.metadata.DirectorList = ResultData.DirectorList;
							this.metadata.RegionalDirectorList = ResultData.RegionalDirectorList;
							this.metadata.SalesServiceList = ResultData.SalesServiceList;
							this.metadata.SalseList = ResultData.SalseList;
							this.metadata.SeniorDealerTerminalList = ResultData.SeniorDealerTerminalList;
							this.metadata.TeamList = ResultData.TeamList;
							this.metadata.AuditStateBaseList = ResultData.AuditStateBaseList;
							this.IsFirst = false;
						}

						if (ResultData.AuditList) {
							this.reviewPage = ResultData.AuditList;
							if (reload) {
								this.reviewList = ResultData.AuditList.Items;
							} else {
								this.reviewList.push(...ResultData.AuditList.Items);
							}

							if (this.reviewPage.PageIndex + 1 >= this.reviewPage.PageCount) {
								this.status = 'nomore';
							}
						} else {
							this.reviewList = [];
							this.status = 'nomore';
						}
					}
				});
		}
	}
};
</script>

<style>
page {
	background-color: #eaecef;
}
</style>
<style lang="scss" scoped>
.review-list {
	padding: 20rpx;
}

.review-item {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 12rpx;
	font-size: 22rpx;
	color: #2e2f32;
	padding: 20rpx 40rpx;
	margin-bottom: 20rpx;

	.dealer-name,
	.c_name {
		color: #ff7a23;
		font-weight: bold;
		// font-size: 28rpx;
	}

	.dealer-name {
		margin-right: 10rpx;
	}

	.title,
	.level {
		line-height: 40rpx;
	}

	.grid-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 40rpx);
		line-height: 40rpx;
	}

	.btn-group {
		text-align: right;
	}
}
</style>
